import React from 'react';
import { Form, Row, Col, Button, Cascader } from 'dw-mx';
import { Code } from 'dw-mx-extend';

export default function CascaderDemo() {

    const [form] = Form.useForm();

    const options = Code.CASCADJSONCODE([
      { value: '1', content: '浙江',children:[{value:'4',content:'杭州',children:[{value:'7',content:'西湖'}]}] },
      { value: '2', content: '山东',children:[{value:'5',content:'济南',children:[{value:'8',content:'大明湖'}]}] },
      { value: '3', content: '江苏',children:[{value:'6',content:'南京',children:[{value:'9',content:'秦淮河'}]}] }
      ])



const onChange = (value) => {
      // 可以监听 onchange
      alert(value);
    };

    const onClick = async (value) => {
        // 可以从外部取值
        console.log(form.getFieldsValue());

        // 可以验证必填项
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);
        }
    };


    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };

    return (
        <>
            <Form form={form}
                  {...layout}
                  layout={'horizontal'}
                  >
                <Row>
                    <Col span={8}>
                        <Form.Item label="任务状态" name="rwzt" rules={[{ required: true }]}>
                            <Cascader  onChange={onChange} options={options} placeholder="请选择……"/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

            <Button onClick={onClick}>取值</Button>
        </>
    );
}

